<script setup lang="ts">
import {onMounted, ref} from "vue";

const orientation = ref('portrait');
const scale = ref("fit"); //noscale, shrink, fit
const side = ref("simplex"); // duplex, duplexshort, duplexlong, simplex
const paperSize = ref("A5"); // A2, A3, A4, A5, A6, letter, legal, tabloid, statement, or a name selectable from your printer settings.
const monochrome = ref(false); // 是否黑白打印
const copies = ref(1); // 份数

onMounted(() => {
  const opt = myLocalStorage.getItem("option");
  orientation.value = opt.orientation;
  scale.value = opt.scale;
  side.value = opt.side;
  paperSize.value = opt.paperSize;
  monochrome.value = opt.monochrome;
  copies.value = opt.copies;
});

function setDefault() {
  orientation.value = 'portrait';
  scale.value = "fit";
  side.value = "simplex";
  paperSize.value = "A5";
  monochrome.value = false;
  copies.value = 1;
}

function confirm() {
  // 保存设置
  myLocalStorage.setItem("option", {
    orientation: orientation.value || 'portrait',
    scale: scale.value || "fit",
    side: side.value || "simplex",
    paperSize: paperSize.value || "A5",
    monochrome: monochrome.value || false,
    copies: copies.value || 1,
  });
  close();
}

function close() {
  window.api.close();
}
</script>

<template>
  <div style="height: 100%">
    <div
        style="height: calc(100% - 39px); box-sizing: border-box"
    >
      <el-form label-width="70px">
        <el-form-item label="纸张方向">
          <el-radio-group v-model="orientation">
            <el-radio-button label="纵向" value="portrait"/>
            <el-radio-button label="横向" value="landscape"/>
          </el-radio-group>
        </el-form-item>
        <!--                <el-form-item label="缩放">-->
        <!--                  <el-radio-group v-model="scale">-->
        <!--                    <el-radio-button label="无缩放" value="noscale"/>-->
        <!--                    <el-radio-button label="适应内容" value="fit"/>-->
        <!--                    <el-radio-button label="shrink" value="shrink"/>-->
        <!--                  </el-radio-group>-->
        <!--                </el-form-item>-->
        <el-form-item label="双面打印">
          <el-radio-group v-model="side">
            <!--          <el-radio-button label="双面打印" value="duplex" />-->
            <el-radio-button label="单面打印" value="simplex"/>
            <!--          <el-radio-button label="短边翻转" value="shortEdge" />-->
            <!--          <el-radio-button label="长边翻转" value="longEdge" />-->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="纸张大小">
          <el-radio-group v-model="paperSize">
            <el-radio-button label="A5" value="A5"/>
            <el-radio-button label="A4" value="A4"/>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="黑白打印">
          <el-radio-group v-model="monochrome">
            <el-radio-button label="彩色" :value="false"/>
            <el-radio-button label="黑白" :value="true"/>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="份数" :rules="[{ min: 1 }]">
          <el-input type="number" min="1" v-model="copies" style="display: inline-block;width: 80px;"/>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-box"
    >
      <el-button link type="primary" @click="setDefault"
      >恢复默认
      </el-button
      >
      <el-button type="primary" @click="confirm"
      >确定
      </el-button
      >
      <el-button @click="close">取消</el-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.btn-box {
  height: 39px;
  align-content: end;
  text-align: end;

  button {
    width: 75px
  }
}
</style>
